<template>
  <n-menu
    v-model:value="activeKey"
    mode="horizontal"
    :options="menuOptions"
    responsive />
</template>

<script setup lang="ts">
import type { MenuOption } from "naive-ui";
import { h, ref } from "vue";
import { testRouters } from "@/router/routers/test.ts";
import { RouteRecordRaw, RouterLink } from "vue-router";
import { removeLayoutRoute } from "@/router/tool.ts";

const activeKey = ref<string | null>(null);

const menuOptions = ref<MenuOption[]>([]);
removeLayoutRoute(testRouters).forEach((router: RouteRecordRaw) => {
  menuOptions.value.push({
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: router.name,
          },
        },
        { default: () => router.meta.title }
      ),
    key: router.path,
  });
});
</script>

<style scoped>
.n-menu {
}
</style>
